import React, { useEffect, useState } from 'react'
import { Button } from '@material-ui/core'
import './sq.less'
import SQGridList from '@/components/SQGridList/'
import { getSelectQustionApi } from '@/Api'
import { useHistory } from 'react-router'
import GoBack from '@/components/GoBack'

const cateEnum = {
    'all': '全部',
    'qa': '问答',
    'fill': "填空",
    'one': '单选',
    'check': '判断',
    'code': '编程',
    'many': '多选'
}
export default function SelectQuestion(props) {
    const history = useHistory()

    // 试题分类
    const testType = [
        { key: 'all', zh: '全部', value: '' },
        { key: 'err', zh: '错误', value: '' },
        { key: 'done', zh: '已做', value: '' },
        { key: 'notdone', zh: '未做', value: '' },
    ]
    // 题目分类
    const [questionTypeList, setQuestionTypeList] = useState([])
    useEffect(() => {
        getSelectQustionApi({
            actionCode: props.match.params.code,
            testType: 'all'
        }).then(res => {
            const { data } = res
            data.forEach(e => {
                e.zh = cateEnum[e.key]
            });
            setQuestionTypeList(data)
        }).catch(
            err => {
                console.log(err);
            }
        )
    }, [props.match.params.code])
    // 做题数据
    const stNumber = [
        { key: 5, zh: '5', value: '' },
        { key: 10, zh: '10', value: '' },
        { key: 20, zh: '20', value: '' },
        { key: 30, zh: '30', value: '' },
        { key: 50, zh: '50', value: '' },
        { key: 100, zh: '100', value: '' },
    ]

    // 修改一个要获取的试题的类型 - 这是第一个列表的值
    const [stType, setSTType] = useState('all')
    // 修改一个要获取的题目的类型 - 这是第二个列表的值
    const [questionType, setQuestionType] = useState('all')
    // 修改的用于传递到服务器的 做题数量
    const [testNum, setTestNum] = useState(5)

    // 跳转到练习页面
    const gotoPractice = () => {
        // history.push({
        //     pathname:'/pr',
        //     state :{
        //         testType : stType,
        //         questionType ,
        //         testNum,
        //         actionCode : props.match.params.code
        //     }
        // })

        // 把需要给 localStorage 存储的数据先存起来
        const state = {
            testType: stType,
            questionType,
            testNum,
            actionCode: props.match.params.code
        }
        localStorage.setItem('prstate',JSON.stringify(state))

        history.push('/pr')
    }

    return (
        <div className="sq">
            <div className="top-btns">
                <Button onClick={gotoPractice} variant="contained" color="primary">进入练习模式</Button>
                <Button className="exam" variant="contained" color="primary">进入考试模式</Button>
            </div>
            {/* 试题分类 - 第一个分类 */}
            {/* <div>选中的试题分类：{stType}</div> */}
            <SQGridList data={testType} title="试题分类" onItemChange={(key) => setSTType(key)}></SQGridList>
            {/* 题目分类 - 第二个分类 */}
            {/* <div>选中的题目分类：{questionType}</div> */}
            <SQGridList data={questionTypeList} title="题目分类" onItemChange={(key) => setQuestionType(key)}></SQGridList>
            {/* 做题数量 - 第三个分类 */}
            {/* <div>选中的做题数量：{testNum}</div> */}
            <SQGridList data={stNumber} title="做题数量" onItemChange={(key) => setTestNum(key)}></SQGridList>
            <GoBack></GoBack>
        </div>
    )
}
